<template>
  <!-- 
  
-->
 <div class="report-charts-title" >生产调度中心</div>
  <div class="report-charts">
    <div class="charts" ref="chart1" id="chart1Id" style="margin-bottom:20px;"></div>
    <div class="charts" ref="chart2" id="chart2Id" style="margin-bottom:20px;"></div>
    <div class="charts" ref="chart3" id="chart3Id" style="margin-bottom:20px;"></div>
    <div class="charts" ref="chart4" id="chart4Id" style="height:235px;"></div>
    <div class="charts" ref="chart5" id="chart5Id" style="height:235px;"></div>
    <div class="charts today-report" ref="chart6" id="chart6Id" style="height:235px;">
      <h3 class="today-title" >今日生产</h3>
      <div class="today-item-container">
      <div class="today-item">
        <label>投坯：</label>
        <span>{{todayReport.rowclothNum}}米</span>
      </div>
      <div class="today-item">
        <label>成品：</label>
        <span>{{todayReport.productNum}}米</span>
      </div>
      <div class="today-item today-level-item">
        <label>一等品：</label>
        <span>{{todayReport.level_1_num}}米</span>
      </div>
      <div class="today-item today-level-item">
        <label>二等品：</label>
        <span>{{todayReport.level_2_num}}米</span>
      </div>
      <div class="today-item today-level-item">
        <label>三等品：</label>
        <span>{{todayReport.level_3_num}}米</span>
      </div>
      <div class="today-item today-level-item">
        <label>等外品：</label>
        <span>{{todayReport.level_4_num}}米</span>
      </div>
      <div class="today-item">
        <label>合格率：</label>
        <span>{{todayReport.qualifiedRate}}</span>
      </div>
      <div class="today-item">
        <label>入库：</label>
        <span>{{todayReport.inNum}}米</span>
      </div>
      <div class="today-item">
        <label>出库：</label>
        <span>{{todayReport.outNum}}米</span>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup >
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { tip, get, post, del, removeLocalToken, ddo } from "@/common";
import * as echarts from "echarts";

const chart1 = ref();
const chart2 = ref();
const chart3 = ref();
const chart4 = ref();
const chart5 = ref();
const chart6 = ref();

let chartObj1;
let chartObj2;
let chartObj3;
let chartObj4;
let chartObj5;
let chartObj6;

const makeChart = (chartRef, option) => {
  const chartObj = echarts.init(chartRef.value);
  chartObj.setOption(option);
  return chartObj;
};
onMounted(() => {
  nextTick(() => {
    chartObj1 = makeChart(chart1, reportByTypeOption);
    chartObj2 = makeChart(chart2, qualifiedRateOption);
    chartObj3 = makeChart(chart3, monthNumOption);
    chartObj4 = makeChart(chart4, storeInOutOption);
    chartObj5 = makeChart(chart5, productLevelNumOption);
    //chartObj6 = makeChart(chart6, chart2Option);
  });
});

const refreshChart = (chartObj, option) => {
  if (!chartObj) {
    nextTick(() => {
      refreshChart(chartObj, option);
    });
  } else {
    chartObj.setOption(option);
  }
};

const reportByTypeOption = reactive({
  title: { text: new Date().getFullYear() + "年计划进展情况" },
  legend: {
    orient: "horizontal",
    // Try 'horizontal'
    //orient: 'vertical',
    right:5,
    top:30
    //top: 'center'
  },
  tooltip: {
    trigger: "axis",
  },
  dataset: {
    source: [
      // ['product', '2015', '2016', '2017'],
      // ['Matcha Latte', 43.3, 85.8, 93.7],
      // ['Milk Tea', 83.1, 73.4, 55.1],
      // ['Cheese Cocoa', 86.4, 65.2, 82.5],
      // ['Walnut Brownie', 72.4, 53.9, 39.1]
    ],
  },
  xAxis: { type: "category" },
  yAxis: {
    type: "value",
    name: "产量(千米)",
  },
  series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
});

watch(reportByTypeOption, (newOption, oldOption) => refreshChart(chartObj1, newOption));

const getReportByTypeOption = () => {
  get("/report/charts/type").then((result) => {
    const source = [["type", "计划量", "投坯量", "成品量"]];
    result.data.forEach((item) => {
      source.push([
        ddo.text("prodTypes", item.type),
        item.planNUm / 1000,
        item.rowclothNum / 1000,
        item.productNum / 1000,
      ]);
    });
    reportByTypeOption.dataset.source = source;
  });
};
getReportByTypeOption();


//合格率
const qualifiedRateOption = reactive({
  
  series: [
    {
      type: 'gauge',
      progress: {       
        show: true,
        width: 10
      },
      axisLine: {
        lineStyle: {
          width: 10
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 15,
        color: '#999',
        fontSize: 13
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10
        }
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        fontSize: 14,        
        offsetCenter: [0, '75%'],
        formatter: function (value) {
          return '合格率(%)\n'+value ;
        }
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
});
watch(qualifiedRateOption, (newOption, oldOption) => refreshChart(chartObj2, newOption));

const getQualifiedRateOption = () => {
  get("/report/charts/qualified-rate").then((result) => {
    qualifiedRateOption.series[0].data=[{value:Math.round(result.data*10000)/100}]
  });
};
getQualifiedRateOption();

//月产量
const monthNumOption = reactive({
  title: {
    text: new Date().getFullYear() + "月产量走势",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["计划", "投坯", "成品"],
    right: 30,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
    name: "产量(千米)",
  },
  series: [
    {
      name: "计划",
      type: "line",
      //stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "投坯",
      type: "line",
      //stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "成品",
      type: "line",
      //stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410],
    },
  ],
});

watch(monthNumOption, (newOption, oldOption) => refreshChart(chartObj3, newOption));

const getReportByMonthNumOption = () => {
  get("/report/charts/month-num").then((result) => {
    const xAxisData = result.data.months.map((item) => item + "月");
    monthNumOption.xAxis.data = xAxisData;
    monthNumOption.series = [
      {
        name: "计划",
        type: "line",
        //stack: 'Total',
        data: result.data.planNums.map(num=>num/1000),
      },
      {
        name: "投坯",
        type: "line",
        //stack: 'Total',
        data: result.data.rowclothNums.map(num=>num/1000),
      },
      {
        name: "成品",
        type: "line",
        //stack: 'Total',
        data:result.data.productNums.map(num=>num/1000),
      },
    ];
  });
};
getReportByMonthNumOption();

//按月出入库情况
const storeInOutOption = reactive({
  title: {
    text: new Date().getFullYear() + '年出入库情况',
    
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['入库', '出库'],
    top:4,
    right:70
  },
  toolbox: {
    show: true,
    feature: {
      // dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      // restore: { show: true },
      // saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['1月', '2月', '3月', '4月']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "产量(千米)",

    }
  ],
  series: [
    {
      name: '入库',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2
      ],
      // markPoint: {
      //   data: [
      //     { type: 'max', name: 'Max' },
      //     { type: 'min', name: 'Min' }
      //   ]
      // },
      // markLine: {
      //   data: [{ type: 'average', name: 'Avg' }]
      // }
    },
    {
      name: '出库',
      type: 'bar',
      data: [
        2.6, 5.9, 9.0, 26.4
      ],
      // markPoint: {
      //   data: [
      //     { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
      //     { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
      //   ]
      // },
      // markLine: {
      //   data: [{ type: 'average', name: 'Avg' }]
      // }
    }
  ]
});
watch(storeInOutOption, (newOption, oldOption) => refreshChart(chartObj4, newOption));
const getStoreInOutOptionOption = () => {
  get("/report/charts/store-inout").then((result) => {

    const xAxisData = [];
    for(let i=1;i<= result.data.nowMonth;i++)xAxisData.push(i+"月");
    storeInOutOption.xAxis.data = xAxisData;

    storeInOutOption.series = [
      {
        name: "入库",
        type: "bar",
        data: result.data.inNums.map(num=>num/1000),
      },
      {
        name: "出库",
        type: "bar",
        data: result.data.outNums.map(num=>num/1000),
      },
    ];
  });
};
getStoreInOutOptionOption();

//产品等级分布
const productLevelNumOption = reactive({
  title: {
    text: '产品质量构成',
    // subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '一等品' },
        { value: 735, name: '二等品' },
        { value: 580, name: '三等品' },
        { value: 484, name: '等外品' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
watch(productLevelNumOption, (newOption, oldOption) => refreshChart(chartObj5, newOption));
const getProductLevelNumOption = () => {
  get("/report/charts/level-num").then((result) => {
    productLevelNumOption.series[0].data=result.data.map(item=>({value:item.product_num,name:ddo.text('prodLevels',item.product_level)}));
  });
};
getProductLevelNumOption();


//今日生产
const todayReport = ref({});
const getTodayReport = ()=>{
  get("/report/charts/today").then(result=>{
      todayReport.value = result.data;
  });
};
getTodayReport();

// const chart2Option = reactive({
//   tooltip: {
//     formatter: "{a} <br/>{b} : {c}%",
//   },
//   series: [
//     {
//       name: "Pressure",
//       type: "gauge",
//       detail: {
//         formatter: "{value}",
//       },
//       data: [
//         {
//           value: 50,
//           name: "SCORE",
//         },
//       ],
//     },
//   ],
// });
</script>

<style scoped >
.report-charts-title{
  text-align:center;font-size:30px;font-weight:bold;padding-bottom:6px;
  letter-spacing: 8px;
  /* background-color: #100C2A;color:white; */
}
.report-charts {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* background-color: #100C2A; */
}

.report-charts .charts {
  width: 30%;
  height: 300px;
  flex: atuo;
  /* border:1px solid red; */
}

.today-report{
  padding:0px 0px 0px 50px;
  
}

.today-report .today-title{
  padding-left:20px;
  margin-bottom:10px;
}
.today-report > .today-item-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:180px;
}
.today-report > .today-item-container .today-item{
  box-sizing: border-box;
  width:40%;
  margin:0px 20px 0px 20px;
  padding:5px 20px 5px 10px;
  font-size:13px;
  border-bottom: 1px dashed #DDDDDD;
  display: flex;
  justify-content: space-between;

}

.today-report > .today-item-container .today-item.today-level-item{
  padding-left:20px;
  
}

</style>